<script setup lang="ts">
const { mode = "sticky", footerOffset = 0 } = defineProps<{
  mode?: "fixed" | "sticky";

  bodyFlex?: boolean;
  bodyCenter?: boolean;

  bgcolor?: string;
  hiddenHeaderBg?: boolean;

  footerSticky?: boolean;
  footerOffset?: string | number;

  height?: string;
}>();
</script>

<template>
  <view
    class="page-container min-h-screen flex flex-col"
    :style="{ background: bgcolor }"
  >
    <view
      v-if="!hiddenHeaderBg"
      class="absolute top-0 left-0 w-full overflow-hidden"
      :style="{ height: height || '400rpx' }"
    >
      <view
        class="absolute bottom-0 left-1/2 -translate-x-[50%] bg-[#BC8653] w-[2000px] h-[2000px] rounded-full"
      />
    </view>

    <!-- S 页面顶部 -->
    <view
      class="page-header sticky w-full top-0 z-20 overflow-hidden"
      :class="{
        sticky: mode == 'sticky',
        fixed: mode == 'fixed',
      }"
      style="overflow-y: overlay"
    >
      <!-- <image
      src="/static/images/page-bg.png"
      class="absolute top-0 left-0 w-full"
      mode="widthFix"
    /> -->

      <slot name="header" />
    </view>
    <!-- E 页面顶部 -->

    <view
      class="flex-auto relative z-10"
      :class="[
        {
          'flex-center': bodyCenter,
          'flex flex-col': bodyFlex,
        },
      ]"
    >
      <slot />
    </view>

    <view
      class="flex-none"
      :class="[footerSticky && 'sticky z-10']"
      :style="{ bottom: footerOffset }"
    >
      <slot name="footer" />
    </view>
  </view>
</template>

<style lang="less">
.page-container {
  background: linear-gradient(to bottom, #fff7ed 0%, #dcc09f 100%);
}
</style>
